import React, { useState } from 'react';
import { useUser } from '@contexts/UserContext';
import './styles.scss';

/**
 * 设置弹窗组件
 * @param {Object} props
 * @param {boolean} props.isOpen - 是否显示弹窗
 * @param {Function} props.onClose - 关闭弹窗的回调函数
 * @returns {JSX.Element} 设置弹窗组件
 */
const SettingsModal = ({ isOpen, onClose }) => {
    // 获取用户信息和更新方法
    const { user, updateUser } = useUser();

    // 本地状态
    const [name, setName] = useState(user?.name || '');
    const [email, setEmail] = useState(user?.email || '');
    const [avatar, setAvatar] = useState(user?.avatar || '');
    const [isEditing, setIsEditing] = useState(false);

    // 处理保存设置
    const handleSave = () => {
        updateUser({
            ...user,
            name,
            email,
            avatar
        });
        setIsEditing(false);
    };

    // 处理取消编辑
    const handleCancel = () => {
        setName(user?.name || '');
        setEmail(user?.email || '');
        setAvatar(user?.avatar || '');
        setIsEditing(false);
    };

    // 处理头像上传
    const handleAvatarUpload = (e) => {
        const file = e.target.files?.[0];
        if (file) {
            const reader = new FileReader();
            reader.onloadend = () => {
                setAvatar(reader.result);
            };
            reader.readAsDataURL(file);
        }
    };

    if (!isOpen) return null;

    return (
        <div className="settings-modal-overlay" onClick={onClose}>
            <div className="settings-modal" onClick={e => e.stopPropagation()}>
                {/* 弹窗头部 */}
                <div className="modal-header">
                    <h2>设置</h2>
                    <button className="close-button" onClick={onClose}>
                        <i className="fas fa-times"></i>
                    </button>
                </div>

                {/* 弹窗内容 */}
                <div className="modal-content">
                    {/* 头像设置 */}
                    <div className="setting-section">
                        <label>头像</label>
                        <div className="avatar-upload">
                            <img src={avatar || '/default-avatar.png'} alt="用户头像" />
                            {isEditing && (
                                <div className="upload-overlay">
                                    <input
                                        type="file"
                                        accept="image/*"
                                        onChange={handleAvatarUpload}
                                    />
                                    <i className="fas fa-camera"></i>
                                </div>
                            )}
                        </div>
                    </div>

                    {/* 基本信息设置 */}
                    <div className="setting-section">
                        <label>用户名</label>
                        {isEditing ? (
                            <input
                                type="text"
                                value={name}
                                onChange={e => setName(e.target.value)}
                                placeholder="请输入用户名"
                            />
                        ) : (
                            <div className="info-text">{name}</div>
                        )}
                    </div>

                    <div className="setting-section">
                        <label>邮箱</label>
                        {isEditing ? (
                            <input
                                type="email"
                                value={email}
                                onChange={e => setEmail(e.target.value)}
                                placeholder="请输入邮箱"
                            />
                        ) : (
                            <div className="info-text">{email}</div>
                        )}
                    </div>

                    {/* 其他设置项 */}
                    <div className="setting-section">
                        <label>主题</label>
                        <select disabled>
                            <option value="light">浅色</option>
                            <option value="dark">深色</option>
                        </select>
                    </div>

                    <div className="setting-section">
                        <label>语言</label>
                        <select disabled>
                            <option value="zh">中文</option>
                            <option value="en">English</option>
                        </select>
                    </div>
                </div>

                {/* 弹窗底部 */}
                <div className="modal-footer">
                    {isEditing ? (
                        <>
                            <button className="cancel-button" onClick={handleCancel}>
                                取消
                            </button>
                            <button className="save-button" onClick={handleSave}>
                                保存
                            </button>
                        </>
                    ) : (
                        <button className="edit-button" onClick={() => setIsEditing(true)}>
                            编辑
                        </button>
                    )}
                </div>
            </div>
        </div>
    );
};

export default SettingsModal; 